<template>
  <div class="home-my-task">
    <home-card title="我的任务">
      <el-row :gutter="20">
        <el-col :span="6" v-for="task in tasks" :key="task.type">
          <!-- :class="task.title == currTitle ? 'selected' : ''" -->
          <div class="task-total" @click="goToList(task.type)">
            <svg-icon
              class="task-total-icon"
              :icon-class="task.icon"
            ></svg-icon>
            <div>
              <h6 class="task-total-title">{{ task.title }}</h6>
              <div class="task-total-num">
                {{ task.num }}
                <span v-if="task.desc" class="task-total-desc">{{
                  task.desc
                }}</span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </home-card>

    <!-- <home-card :title="currTitle">
      <el-button slot="operation" type="text" size="default" @click="goToList"
        >查看更多</el-button
      >

      <el-table
        v-loading="currTable.loading"
        :data="currTable.data"
        class="task-table"
      >
        <el-table-column
          v-for="col in currTable.columns"
          :prop="col.field"
          :key="col.field"
          :label="col.label"
          :width="col.width"
        >
          <template v-if="col.formatter" v-slot="scope">
            <span>{{ col.formatter(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </home-card> -->
  </div>
</template>

<script>
import HomeCard from "./home-card.vue";
import { getMyTask, getMyToDoList, getMyDoneList } from "@/api/home";

export default {
  components: { HomeCard },
  data() {
    return {
      // currTitle: "待办",
      // currType: "todo",
      tasks: this.getTaskData(),
      currTable: {
        loading: false,
        data: [],
        columns: [
          {
            field: "taskName",
            label: "任务名称",
          },
          {
            field: "processName",
            label: "所属流程",
          },
          {
            field: "startUserName",
            label: "流程发起人",
          },
          {
            field: "createTime",
            label: "创建时间",
            formatter: (time) => {
              return this.parseTime(time);
            },
          },
        ],
      },
    };
  },
  created() {
    this.getMyTask();
    // this.getTableData(this.currType);
  },
  methods: {
    getMyTask() {
      getMyTask().then(({ data }) => {
        this.tasks = this.getTaskData(data);
      });
    },
    getTaskData(data) {
      return [
        {
          title: "待办",
          type: "todo",
          icon: "todo-info",
          num: data?.unDoCount || 0,
        },
        {
          title: "已办",
          type: "done",
          icon: "todo-success",
          num: data?.endCount || 0,
        },
        {
          title: "即将过期",
          type: "fewTime",
          icon: "todo-warning",
          num: 0,
          desc: "0%",
        },
        {
          title: "已逾期",
          type: "outdate",
          icon: "todo-danger",
          num: data?.timeOutCount || 0,
          // desc: "0%",
        },
      ];
    },
    /* selectTask({ type, title }) {
      this.currTitle = title;
      if (this.currType !== type) {
        this.currType = type;
        this.getTableData(type);
      }
    },
    async getTableData(type) {
      this.currTable.loading = true;
      let tableData = [];
      let res = {};
      switch (type) {
        case "todo":
          res = await getMyToDoList();
          tableData = res?.data || [];
          break;
        case "done":
          res = await getMyDoneList();
          tableData = res?.data || [];
          break;
        case "fewTime":
          // 暂无接口
          break;

        case "outdate":
          // 暂无接口
          break;

        default:
          break;
      }
      this.currTable.data = tableData;
      this.currTable.loading = false;
    }, */
    goToList(type) {
      debugger;
      let path = "";
      let query = {};
      switch (type) {
        case "todo":
          path = "/bpm/task/todo";
          break;
        case "done":
          path = "/bpm/task/done";
          break;
        case "fewTime":
          /* TODO */
          path = "/bpm/task/todo";
          break;

        case "outdate":
          /* TODO */
          path = "/bpm/task/todo";
          break;

        default:
          break;
      }
      this.$router.push({
        path,
        query,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.task-total {
  padding: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #1d2129;

  &:hover,
  &.selected {
    // background: #f7f8f8;
    border-radius: 4px;
    background: url("@/assets/images/home/task-active.svg") 0 0 / cover
      no-repeat;
    color: #f6f7f8;
    .task-total-desc {
      color: #f6f7f8;
    }
  }

  &-icon {
    font-size: 54px;
    flex-shrink: 0;
    margin-right: 6px;
  }
  &-title {
    font-size: 12px;
    margin: 0;
    line-height: 20px;
  }
  &-num {
    font-size: 20px;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
    font-weight: bold;
    line-height: 28px;
  }
  &-desc {
    margin-left: 6px;
    font-size: 16px;
    font-family: DIN Alternate-Bold, DIN Alternate;
    font-weight: bold;
    color: #a7aaae;
    line-height: 24px;
  }
}
</style>

<style lang="scss">
.home-my-task {
  margin-bottom: 20px;
  .el-col {
    position: relative;
    &:not(:last-child)::after {
      content: " ";
      width: 1px;
      height: 54px;
      background: #f2f3f5;
      display: block;
      position: absolute;
      right: 0;
      top: 20px;
    }
  }
  .el-row::before,
  .el-row::after {
    display: block;
    width: 90%;
    height: 1px;
    background: #f2f3f5;
    margin: auto;
  }
  .el-col {
    margin-bottom: 3px;
    margin-top: 3px;
  }
  .task-table {
    border: 1px solid #e8eaed;
    &::before {
      height: 0;
    }
  }
}
</style>
